<template>
	<uni-nav-bar left-icon="left" title="搜索" :border="false" style="border-bottom: 1px solid #eee;" @clickLeft="back" />
	<view class="all">
		<view class="container">
		  <!-- 搜索框 -->
		  <view class="search-container">
		    <uni-easyinput prefixIcon="search" style="width: 250px;margin:10px;" placeholder="搜索" @iconClick="iconClick"></uni-easyinput>
		  </view>
		  <!-- 热门搜索区域 -->
		  <view class="hot-search">
		    <text class="hot-search-title">热门搜索</text><br/>
			<view style="margin-top: 15px;">
				<view style="width: 100px;margin: 10px;display: inline;" v-for="(item, index) in allProducts" :key="index">
				  <text style="width: 100px;padding-left: 8px;padding-right:8px;border-radius: 10px;border: 1px #3f3f3f solid;" @click="setId(item.id-1)">
					{{ item.name }}
				  </text>
				</view>
			</view>
		  </view>
	    </view>
		
	</view>
	
	
	<view class="ld">
			    
		<view class="left">
			
			<view 
				v-for="(item,index) in cates" 
				:key="index" 
				@click="setId(index)"
				style="height: 50px;width: 100%;display: flex;align-items: center;text-align: center;"
				:class="{active:index===currentNum}"
				>
				<text style="width: 100%;">{{item.sortName}}</text>
			</view>
		</view>
		
	
		<view class="right">
			<scroll-view  
				:scroll-y="true"  
				style="white-space: nowrap;height:100%;"
				:scroll-into-view="clickId"
				scroll-with-animation
				@scroll="scroll"
				@scrolltolower="scrolltolower"
			>
				<view v-for="(item,index) in cates" :key="index" >
					<uni-group :id="'po'+index" :title="item.sortName" mode="card" style="height: 100%;padding-bottom: 10px;">
						<!-- <view v-for="(it ,ind) in item.list" :key="ind">
							
						</view> -->
						<uni-grid :column="3" :showBorder="false" :highlight="true" >
							<uni-grid-item style="border: 0px;height: 110px;width: 75px;margin-left: 10px;margin-top: 10px;" v-for="(it ,ind) in item.listItem" :key="ind">
								
								<image :src="it.photoSrc" style="height: 100%;width: 100%;border-radius: 10px;"></image>
								<text style="height: 20px;width: 100%;text-align: center;margin-top: 10px;">{{it.itemName}} </text>
							</uni-grid-item>
						</uni-grid>
					</uni-group>
										
				</view> 
			</scroll-view>	 
		</view>
	</view>
	
	
</template>

<script setup lang="ts">import { ref } from 'vue';



let  keyword = '' // 用户输入的关键词
let  goodsList: [] // 搜索结果列表
let  hotSearchList = ['鸡', '鱼', '豆'] // 热门搜索词条
let allProducts =  [
	  { id: 2, name: '粤菜'},
	  { id: 4, name: '鸡'},
	  { id: 3, name: '甜品'},
	  { id: 4, name: '谷物'} // 假设的持续时间
	]


function iconClick(type) {
	uni.showToast({
		title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
		icon: 'none'
	})
}

function onSearchInput(e) {
  this.keyword = e.target.value;
}
function onHotSearchTap(hotKeyword) {
  this.keyword = hotKeyword;
  this.onSearchConfirm();
}
function toDetail(goodsId) {
  uni.navigateTo({
	url: `/pages/detail/detail?goodsId=${goodsId}`
  });
}
function onSearchConfirm() {
  const keyword = this.keyword.trim();
  if (!keyword) {
	uni.showToast({
	  title: '请输入搜索关键词',
	  icon: 'none'
	});
	return;
  }
  this.fetchSearchList(keyword);
}
function fetchSearchList(keyword) {
  // 使用 filter 方法从本地商品数据中过滤出包含关键词的商品
  this.goodsList = this.allProducts.filter(product => product.name.includes(keyword));
  if (this.goodsList.length === 0) {
	uni.showToast({
	  title: '未找到相关商品',
	  icon: 'none'
	});
  }
}

// onLoad() {
//   // 可以在页面加载时做一些初始化操作，比如获取热门搜索数据
//   // 这里已经直接在 data 中定义了 hotSearchList，所以不需要再请求
// }

//子列表内容
let list1 = [
  {
	  itemName:'家常菜',
	  photoSrc:'https://i3.meishichina.com/attachment/collect/2024/12/05/2024120517333692423151.jpg?x-oss-process=style/c320',
	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  },
  {
  	  itemName:'下饭菜',
  	  photoSrc:'https://static.meishichina.com/a1/pic/2023011316736202953769191.jpg',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  },
  {
  	  itemName:'大师菜',
  	  photoSrc:'https://ts4.cn.mm.bing.net/th?id=OIP.ZPdXiCmaaOdHDThX90Re0QHaE8&w=298&h=198&c=10&rs=1&qlt=99&bgcl=fffffe&r=0&o=6&pid=MultiSMRSV2Source',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  },
  {
  	  itemName:'明星菜',
  	  photoSrc:'https://img.xiaochushuo.com/web/265324551.jpg!wl280',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'快手菜',
  	  photoSrc:'https://i3.meishichina.com/attachment/recipe/2024/12/10/2024121017338092058451.jpg?x-oss-process=style/c320',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }
]
let list2 = [
  {
	  itemName:'川菜',
	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2015/11/17/c640_201511171447747613980.jpg?x-oss-process=style/c180',
	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  },
  {
  	  itemName:'湘菜',
  	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455860318713.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'浙菜',
  	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456244685613.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'粤菜',
  	  photoSrc:'http://i80.meishichina.com/attachment/recipe/201103/201103041912387.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'苏菜',
  	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2014/12/22/c640_20141222143416894167579.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'闵菜',
  	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2014/12/26/c640_20141226110303436279944.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'鲁菜',
  	  photoSrc:'http://i80.meishichina.com/attachment/recipe/201107/201107011605478.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'徽菜',
  	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/28/2018042815249048915019702111.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }, 
  {
  	  itemName:'东北菜',
  	  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456152685213.jpg?x-oss-process=style/c180',
  	  routerSrc:'../dish_sort/steamCook/steamCook.vue'
  }
];

//菜式
let list3 = [
	{
		  itemName:'甜品',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/30/2018043015250907171199702108.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'主食',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455534333013.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'汤羹',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456219721513.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'小食',
		  photoSrc:'http://i80.meishichina.com/attachment/recipe/2012/12/02/2012120200444846132229.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'素菜',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/25/20180425152464740491210138013.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'凉菜',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/25/2018042515246480241959732003.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	}
]
//食材
let list4 = [
	{
		  itemName:'肉禽',
		  photoSrc:'https://tse3-mm.cn.bing.net/th/id/OIP-C.zj9gOnMUgwzDDNfGgUqA8wHaGa?w=196&h=183&c=7&r=0&o=5&pid=1.7',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'谷物',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2016/10/11/c640_20161011147617781343413.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'水产',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455919681413.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'果蔬',
		  photoSrc:'http://i80.meishichina.com/attachment/recipe/201106/201106051138478.JPG?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'蛋奶',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2014/12/18/c640_201412181418893646911.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	}
]
//功效
let list5 = [
	{
		  itemName:'增气补血',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456418768613.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'降火润喉',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456394133513.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'提升食欲',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455663373413.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'润肺止咳',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/25/20180425152464777236310104261.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'利湿消肿',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455753662013.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'健脾养胃',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456219721513.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	},
	{
		  itemName:'改善睡眠',
		  photoSrc:'http://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152456113242713.jpg?x-oss-process=style/c180',
		  routerSrc:'../dish_sort/steamCook/steamCook.vue'
	}
]

//分类页左侧标头
let cates = [
  {
	  id:1,
	  sortName:'热门',
	  listItem:list1
  },
  {
	  id:2,
	  sortName:'菜系',
	  listItem:list2
  },
  {
	  id:3,
	  sortName:'菜式',
	  listItem:list3
  },
  {
	  id:4,
	  sortName:'食材',
	  listItem:list4
  },
  {
	  id:5,
	  sortName:'养生功效',
	  listItem:list5
  }
];

let clickId = ref("");
let currentNum = ref(0);


//元素定位赋值
// async function leftClickHandle(index :number, id:number){
// 	this.actives = index
// 	// 获取右侧的数据
// 	const res = await this.$myRequest({
// 		url: '/api/getimages/' + id
// 	})
// 	this.secondData = res.data.message
// }

// 点击后触发的方法
function setId(index){
	clickId.value ="po"+index;
	currentNum.value =index;
}
function scroll(e){
	let scrollTop=e.target.scrollTop;
	for(let i=0;i<this.topList.length;i++){
		let h1=this.topList[i];
		let h2=this.topList[i+1];
		if(scrollTop>=h1&&scrollTop<h2){
			currentNum.value =i;
		}
	}
}
function scrolltolower(){
		setTimeout(()=>{
			currentNum.value=3;
		}, 80);
}
function getNodesInfo(){
	const query = uni.createSelectorQuery().in(this);
	query.selectAll('.title').boundingClientRect().exec((res)=>{
		let nodes=res[0];
		let rel=[];
		nodes.map(item=>{
			rel.push(item.top)
		})
		this.topList=rel;
	});
}

function back() {
	uni.navigateBack({
		delta: 1
	})
}



</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 可选，用于在元素之间添加空间，但在这里我们不需要它 */
  width: 100%; /* 确保容器占满整行 */
  box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
}

.search-input {
  flex: 1; /* 占据剩余空间 */
  //padding: 8px;
  margin-left: 100px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px; /* 圆角处理，左侧圆角 */
}

.search-button {
	 margin-left: 120px;
  //padding: 8px 16px;
  border: 1px solid #ccc;
  border-left: none; /* 移除左侧边框，与输入框相连 */
  background-color: #007bff;
  color: white;
  /* 修改圆角，只保留右侧圆角 */
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  /* 移除 margin-left，让按钮紧挨着输入框 */
}

.search-button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变背景色 */
}
.container{
	
	 flex: 1; /* 占据剩余空间 */
	width: 100%; /* 确保容器占满整行 */
	 justify-content: center; /* 水平居中 */
}

/* .container 类在此处未用于搜索框和按钮的布局，但如果需要为外部容器添加样式，可以保留 */
.all{
	 display: flex;
	  justify-content: center; /* 水平居中 */
}
.hot-search {
  margin-bottom: 20px;
 
  
}
.hot-search-title {
  font-weight: bold;
  justify-content: center; /* 水平居中 */
  margin-left: 10px;
}
.hot-search-item{
	
	
	
	margin: 15px;
	
	background-color: aqua;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
}
.navigator {
  margin: 10px;
  text-align: center;
}
.product-image {
  width: 200px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
}
.product-info {
  margin-top: 10px;
}


.ld{
	width: 100%;
	display: flex;
	height: 678px;
	
}
.left{
	
	width:80px;

}
.right{
		
	flex: 1;
	width: 100%;
	height: 100%;
	
	
}
 /* 高亮样式 */
.active{

	height: 10px;
	width: 100%;
	font-size: 18px;
	color: dodgerblue;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2px;
}

</style>